<template>
  <div>
    <el-tabs>
      <el-tab-pane label="登陆帐号设置">
        <el-form ref="profileForm" :rules="profileRules" :model="profile" label-position="right" label-width="90px">
          <el-col :span="8">
            <el-form-item prop="email" label="登录邮箱:">
              {{profile.email}}
            </el-form-item>
            <el-form-item prop="name" label="用户姓名:">
              <el-input v-model="profile.name" />
            </el-form-item>
            <el-form-item prop="phone" label="联系电话:">
              <el-input v-model="profile.phone" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="profile.updating" @click="updateProfile()">更新</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="分销信息设置">
        <el-form ref="dtbForm" :rules="dtbRules" :model="dtb" label-position="right" label-width="90px">
          <el-col :span="8">
            <el-form-item prop="name" label="企业类型:">
              <el-radio-group v-model="dtb.dtbType">
                <el-radio :label="1">公司</el-radio>
                <el-radio :label="2">个人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="name" label="企业名称:">
              <el-input v-model="dtb.name" />
            </el-form-item>
            <el-form-item prop="email" label="业务邮箱:">
              <el-input v-model="dtb.email" />
            </el-form-item>
            <el-form-item prop="logo" label="logo:">
              <el-upload :action="apiBaseUrl + '/upload/public/temp'" :multiple="false" :show-file-list="false" 
                :on-success="onLogoUploadSuccess" :before-upload="beforeLogoUpload"accept="image/*">
                <img v-if="dtb.logo" :src="dtb.logo" class="dtb-logo-preview">
                <el-button size="small" class="upload-btn">
                  <i class="el-icon-upload"></i> 上传
                </el-button>
                <div slot="tip" class="upload-tips">
                  jpg/png文件, 大小500kb以内, 像素150×90以内
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item prop="addr" label="办公地址:">
              <el-input v-model="dtb.addr" />
            </el-form-item>
            <el-form-item prop="servicePhone" label="客服电话:">
              <el-input v-model="dtb.servicePhone" />
            </el-form-item>
            <el-form-item prop="webSite" label="网站地址:">
              <el-input v-model="dtb.webSite" />
            </el-form-item>
            <el-form-item prop="bio" label="公司简介:">
              <el-input type="textarea" v-model="dtb.bio" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="dtb.updating" @click="updateDtb()">更新</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as types from '@/store/mutation-types'
import { Dtb } from '@/store/api'
import Env from '@/env'

export default {
  data() {
    return {
      apiBaseUrl: Env.apiBaseUrl,
      profile: {
        updating: false
      },
      dtb: {
        dtbType: 1,
        logo: null,
        updating: false
      },
      profileRules: {
        name: [
          { required: true, message: '请填写您的姓名', trigger: 'blur' },
          { max: 16, message: '长度不可超过16', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写联系电话', trigger: 'blur' },
          { min: 7, max: 16, message: '请填写正确的移动电话或固话', trigger: 'blur' }
        ]
      },
      dtbRules: {
        dtbType: [
          { required: true, message: '请选择企业类型', trigger: 'blur' }
        ],
        name: [
          { max: 64, message: '长度不能超过64', trigger: 'blur' }
        ],
        addr: [
          { max: 128, message: '长度不能超过128', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '不是正确的邮箱地址', trigger: 'blur' },
          { max: 32, message: '长度不能超过32', trigger: 'blur' }
        ],
        servicePhone: [
          { min: 7, max: 16, message: '请填写正确的手机/固话', trigger: 'blur' }
        ],
        webSite: [
          { max: 128, message: '长度不能超过128', trigger: 'blur' }
        ],
        bio: [
          { max: 1024, message: '长度不能超过1024', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // reload profile
    this.$store.dispatch(types.RELOAD_PROFILE).then(() => {
      this.profile = Object.assign({}, this.profile, localStorage.getObject('profile'))
    })

    // load dtb
    Dtb.get().then(dtb => {
      this.dtb = Object.assign({}, this.dtb, dtb || {})
    })
  },
  methods: {
    onLogoUploadSuccess(response, file) {
      if (response && response.code && response.code === 200) {
        this.dtb.logo = response.data
      }
    },
    beforeLogoUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt500K = file.size / 1024 < 500

      if (!isJPG && !isPNG) {
        this.$message.error('LOGO图片只能是JPG或者PNG格式')
      }
      if (!isLt500K) {
        this.$message.error('LOGO图片大小不能超过500KB')
      }
      return (isJPG || isPNG) && isLt500K
    },
    updateProfile() {
      this.$refs['profileForm'].validate(valid => {
        if (valid) {
          this.profile.updating = true
          const profile = Object.assign({}, this.profile)
          this.$store.dispatch(types.UPDATE_PROFILE, profile).then(() => {
            this.profile.updating = false
            this.$message({
              showClose: true,
              message: '帐号信息已更新',
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },
    updateDtb() {
      this.$refs['dtbForm'].validate(valid => {
        if (valid) {
          this.dtb.updating = true
          const payload = Object.assign({}, this.dtb)
          Dtb.update(payload).then((dtb) => {
            this.dtb.updating = false
            this.$message({
              showClose: true,
              message: '分销信息已更新',
              type: 'success'
            })
            Object.assign(this.dtb, dtb)
          }).catch(() => {
            this.dtb.updating = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.upload-btn {
  vertical-align: top;
}

.dtb-logo-preview {
  border: 1px dashed #20a0ff;
  margin-right: 8px;
  max-width: 100%;
}

.upload-tips {
  font-size: 12px;
  color: rgb(131, 145, 165);
  line-height: 20px;
}
</style>
